<extend name="template:common" />
<block name="css">
    <css href="__ZTREE__/css/zTreeStyle/zTreeStyle.css" />
    <style>
        ul.ztree {
            margin-top: 10px;
            border: 1px solid #617775;
            background: #f0f6e4;
            width: 220px;
            overflow-y: scroll;
            overflow-x: auto;
        }
    </style>
</block>
<block name="js">
        <script src="__ZTREE__/js/jquery.ztree.core.js"></script>
        <!--引入ztree复选框--> 
        <js href='__ZTREE__/js/jquery.ztree.excheck.min.js'/>
    <script>
        $(function(){
            var setting = {
                //复选框
                check:{
                    enable:true,
                },
                data: {
                    simpleData: {
                        enable: true,
                        pIdKey:'parent_id',
                    }
                },
                callback:{
                    onCheck:function(){
                           //获取所有的被选中的选项
                        var checked_nodes = ztree_obj.getCheckedNodes(true);
                        //清除所有的隐藏域的值
                        perms_node.empty();
                        //添加现在的
                        $(checked_nodes).each(function(){
                            var half_check = this.getCheckStatus();
                            //将半选状态的选项忽略
                            if(!half_check.half){
                                var html = '<input type="hidden" name="perm[]" value="' + this.id + '"/>';
                                $(html).appendTo(perms_node);
                            }
                        });
                      }
                    }
                }
            

            //========================使用ztree展示一个权限列表=======================
                var zNodes = {$permissions};
               var ztree_obj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                ztree_obj.expandAll(true);
                //创建一个div节点
                var perms_node = $('#perms');
                
                //编辑页面回显父级分类
            //1.根据父级节点的id找到ztree中对应的节点
            var parent_node = ztree_obj.getNodesByParam("id", {$row.parent_id|default=0});
            //2.选中此节点
            if(parent_node.length>0){
                parent_node = parent_node[0];
                ztree_obj.selectNode(parent_node);
                //找到父级分类的名字和id放到指定的表单控件中
                $('#parent_name').val(parent_node.name);
                $('#parent_id').val(parent_node.id);
            }
                
            //========================回显关联的管理员===============================
            <notempty name="row">
            var perms = {$row.permission_ids};
            for(i in perms){
                var node = ztree_obj.getNodeByParam("id",perms[i]);
                ztree_obj.checkNode(node,true);
                var half_check = node.getCheckStatus();
                //将半选状态的选项忽略
                if(!half_check.half){
                    var html = '<input type="hidden" name="perm[]" value="' + perms[i] + '"/>';
                    $(html).appendTo(perms_node);
                }
            }
            </notempty>

        });
    </script>
    <block name="main">
        <h1>
            <span class="action-span1"><a href="{:U('index')}">管理员管理</a></span>
            <span id="search_id" class="action-span1"> - {$meta_title} </span>
            <div style="clear:both"></div>
        </h1>
        <div class="main-div">
          <form method="post" action="{:U()}" enctype="multipart/form-data" >
                <table cellspacing="1" cellpadding="3" width="100%">
                        <tr>
                            <td class="label">管理员名称</td>
                            <td>
                            <empty name="row">
                                <input type="text" name="username" maxlength="60" value="{$row.username}" />
                                <span class="require-field">*</span>
                            <else/>
                                {$row.username}
                            </empty>
                            </td>
                        </tr>
                        <empty name="row">
                            <tr>
                                <td class="label">密码</td>
                                <td>
                                    <input type="password" name="password" maxlength="60" value="{$row.password}" />
                                </td>
                            </tr>
                        </empty>
                        <tr>
                            <td class="label">邮箱</td>
                            <td>
                                <empty name="row">
                                    <input type="text" name="email" maxlength="60" value="{$row.email}" />
                                <else/>
                                    {$row.email}
                                </empty>
                            </td>
                        </tr>
                    <tr>
                        <td class="label">角色</td>
                        <td>
                            <foreach name="roles" item="role">
                                <label><input type="checkbox" name="role[]" maxlength="60" value="{$role.id}" <if condition="in_array($role['id'],$row['role_ids'])">checked="checked"</if>/>{$role.name}</label>
                            </foreach>
                        </td>
                    </tr>
                    
                    <tr>
                        <td class="label">额外权限</td>
                        <td>
                            <div id="perms"></div>
                            <ul id="treeDemo" class="ztree"></ul>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><br />
                            <input type="hidden" name='id' value="{$row.id}" />
                            <input type="submit" class="button" value=" 确定 " />
                            <input type="reset" class="button" value=" 重置 " />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </block>
</block>
